/*! @import "main"; */

/**
 * main
 */

html,
body {
	height: 100%;
}

html {
	font-size: 15px;
	line-height: 20px;
	/**
	 * set the parent to background transparent
	 * and position relative to parent, absolute for child
	 */
	background-color: transparent;
}

body {
	font-family: $font-family-local-sans-regular;
	font-weight: 400;
	font-size: 1.000rem;
	line-height: 1.333rem;
	width: 100%;
	color: $color-hex-body-text;
	background-color: $color-hex-page-bg;
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	text-size-adjust: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-font-feature-settings: "liga", "kern";
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	overflow-x: hidden;
	/* user-select: none; */
	margin: 0;
	padding: 0;
}

/**
 * englishextra specific rules
 */

a {
	color: inherit;
	text-decoration: none;
}

a:focus,
a:active,
button:focus,
button:active,
select:focus,
select:active {
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

img {
	border: 0;
	-ms-interpolation-mode: bicubic;
	vertical-align: bottom;
}

p:first-child {
	margin-top: 0;
}

p:last-child {
	margin-bottom: 0;
}

b,
strong,
.bolder {
	font-weight: bold;
}

i,
em,
.italic {
	font-style: italic;
}

u,
.underline {
	text-decoration: underline;
}

*,
*:after,
*::before {
	box-sizing: border-box;
}

::selection {
	color: $color-rgba-selection-text;
	background-color: $color-rgba-selection-bg;
}

::placeholder {
	color: $color-hex-gray-text !important;
	opacity: 1;
}

/**
 * clearfix css-tricks.com/snippets/css/clear-fix/
 */

.cf:after {
	content: "";
	display: table;
	clear: both;
}

/**
 * fit width
 */

.fit-width {
	min-width: 100%;
}

/**
 * fit half width
 */

.fit-half-width {
	min-width: 50%;
}

/**
 * hide and show on mobile
 */

.show-inline-on-mobile,
.show-block-on-mobile {
	display: none;
}

@media handheld, only screen and (max-width: 800px) {
	.hide-on-mobile {
		display: none;
		width: 0;
		height: 0;
	}

	.show-inline-on-mobile {
		display: inline;
	}

	.show-block-on-mobile {
		display: block;
	}
}

/*!
 * fix for micon icon font
 */

.col [class^="mi-"],
.col [class*=" mi-"] {
	font-family: "micon";
}

.col [class^="fa-"],
.col [class*=" fa-"] {
	font-family: "fontAwesome";
}

.col [class^="mi-"],
.col [class*=" mi-"],
.col [class^="fa-"],
.col [class*=" fa-"] {
	font-size: inherit;
	font-weight: normal;
	font-style: normal;
	line-height: inherit;
}

/* .ui-sidebar .mi-CellPhone:before {
	display: inline-block;
	content: "";
	height: 1.333rem;
	width: 1.333rem;
	font-size: 1.333rem;
	line-height: 3.200rem;
	color: transparent;
	background-image: url(../img/fa-qrcode-96x96.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}

.no-svg .ui-sidebar .mi-CellPhone:before {
	background-image: url(../img/fa-qrcode-96x96.png);
} */

/*!
 * remove this to get default home icon
 */

.ui-sidebar .mi-Home:before,
.ui-sidebar .es-mi-Home:before {
	content: "";
}

.ui-sidebar .mi-Home,
.ui-sidebar .es-mi-Home {
	display: block;
	height: 3.200rem;
	width: 3.200rem;
	color: transparent;
	background-color: transparent;
	background-image: url(../img/logo-96x96.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center center;
}

.no-svg .ui-sidebar .mi-Home:before {
	background-image: url(../img/logo-96x96.png);
}

/* .ui-sidebar .mi-Home:before,
.ui-sidebar .es-mi-Home:before {
	font-family: "micon";
	font-family: "eaststreet";
	content: "\E900";
	font-size: 3.200rem;
	background-color: $AccentColor;
} */

.col .btn-larger .mi {
	vertical-align: top;
}

/*!
 * fixes to grid
 */

.col .column,
.col .columns {
	padding-right: 0.667rem;
	padding-left: 0.667rem;
}

/*!
 * layout
 */

.page {
	width: 100%;
	height: 100%;
	background-color: $color-hex-page-bg;
	position: relative;
	top: 0;
	left: 0;
	opacity: 0;
	transition: left 0.2s linear, opacity 0.2s ease;
}

.container {
	width: calc(100% - 3.200rem);
	min-height: calc(100% - 3.200rem);
	background-color: #FFFFFF;
	position: relative;
	top: 0;
	left: 3.200rem;
	transition: left 0.2s linear;
}

@media handheld, only screen and (max-width: 360px) {
	.container {
		width: 100%;
		left: 0;
	}
}

.page.is-active-ui-sidepanel .container {
	left: 0;
}

.app-content {
	width: 100%;
	height: 100%;
}

.col {
	margin: 0 auto;
}

/*!
 * fixes to typeboost1520.css
 * pxtoem.com
 * 6px	0.400em	40.0%	5pt
 * 7px	0.467em	46.7%	5pt
 * 8px	0.533em	53.3%	6pt
 * 9px	0.600em	60.0%	7pt
 * 10px	0.667em	66.7%	8pt
 * 11px	0.733em	73.3%	8pt
 * 12px	0.800em	80.0%	9pt
 * 13px	0.867em	86.7%	10pt
 * 14px	0.933em	93.3%	11pt
 * 15px	1.000em	100.0%	11pt
 * 16px	1.067em	106.7%	12pt
 * 17px	1.133em	113.3%	13pt
 * 18px	1.200em	120.0%	14pt
 * 19px	1.267em	126.7%	14pt
 * 20px	1.333em	133.3%	15pt
 * 21px	1.400em	140.0%	16pt
 * 22px	1.467em	146.7%	17pt
 * 23px	1.533em	153.3%	17pt
 * 24px	1.600em	160.0%	18pt
 */

#h1 {
	margin-top: 0;
}

.col h2.aside-heading {
	margin-top: 1.333rem;
}

@media only screen and (min-width:1024px) {
	.col h2.aside-heading {
		margin-top: 0;
	}
}

.col h2 a,
.col h2 a:focus,
.col h2 a:hover,
.col h2 a:active,
.col h2 a:visited {
	color: inherit;
}

.col h2 + div form p:first-child {
	margin-top: 0;
}

.col a {
	font-weight: inherit;
	color: $color-hex-link;
}

.col a:focus,
.col a:hover,
.col a:active {
	color: $color-hex-hover-link;
}

.col a:visited {
	color: $color-hex-visited-link;
}

.col p.subhead {
	font-size: 1.200rem;
	line-height: 1.600rem;
}

.col dl dt a {
	color: inherit;
	border-bottom-color: inherit;
	border-bottom-style: solid;
	border-bottom-width: 0.067rem;
}

.col dl dt a:focus,
.col dl dt a:hover,
.col dl dt a:active {
	color: inherit;
}

.col img,
.col svg,
.col canvas,
.col video,
.col textarea {
	width: 100%;
}

.col img.inline {
	width: auto;
}

.col img.data-src-img,
.col img[data-src] {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.col img.data-src-img,
.col img[data-src],
.col iframe.data-src-iframe,
.col iframe[data-src] {
	background-color: $LeftNavBarLight;
}

.col img.data-src-img.is-active,
.col img[data-src].is-active {
	opacity: 1;
}

.col figcaption {
	font-size: 0.800rem;
	line-height: 1.067;
	margin-top: 0.267rem;
}

.col figcaption a,
.col figcaption a:focus,
.col figcaption a:hover,
.col figcaption a:active,
.col figcaption a:visited {
	color: inherit;
}

.col figcaption p {
	font-size: inherit;
	line-height: inherit;
}

.col img,
.col svg,
.col canvas {
	height: auto;
}

.col video,
.col svg {
	display: block;
	padding: 0;
}

.col canvas {
	vertical-align: bottom;
}

.col .video-wrapper {
	float: none;
	clear: both;
	width: 100%;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}

.col .video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.col .soundcloud-wrapper iframe {
	display:block;
	width: 100%;
	height: 166px;
}

.holder-chapters-select + canvas {
	margin-top: 1.333rem;
}

.col table.respond {
	width: auto;
}

.col table {
	border: none;
	border-top-width: 0.067rem;
	border-top-style: solid;
	border-top-color: $color-hex-divider;
	border-right-width: 0.067rem;
	border-right-style: solid;
	border-right-color: $color-hex-divider;
	border-left-width: 0.067rem;
	border-left-style: solid;
	border-left-color: $color-hex-divider;
}

.col table th {
	border: none;
	border-bottom-width: 0.067rem;
	border-bottom-style: solid;
	border-bottom-color: $color-hex-divider;
}

.col table td {
	border: none;
	border-bottom-width: 0.067rem;
	border-bottom-style: solid;
	border-bottom-color: $color-hex-divider;
}

.col table td.with-img-only {
	padding: 0.533rem;
}

@media screen and (max-width: 640px) {
	.col table.respond {
		border: none;
	}

	.col table.respond,
	.col table.respond tr,
	.col table.respond td {
		display: block;
		box-sizing: border-box;
	}

	.col table.respond tr {
		width: 100%;
		float: left;
		position: relative;
		border: 0.067rem solid $color-hex-divider;
		border-bottom: none;
		margin-bottom: 1.333rem;
	}

	.col table.respond tr:last-child {
		margin-bottom: 0;
	}

	.col table.respond thead,
	.col table.respond tfoot {
		display: none;
	}

	.col table.respond td::before {
		display: block;
		float: left;
		content: attr(data-label);
		font-weight: bold;
		text-align: right;
		padding-right: 0.533rem;
	}
}

.col .highlight {
	color: $color-hex-highlight;
}

.col .phonetic {
	font-family: $font-family-local-monospace;
}

/*!
 * buttons
 */

.col div + .holder-bottom-navigation,
.holder-bottom-navigation:first-child {
	margin-top: 1.333rem;
}

.col .btn-larger,
.col a.btn-larger {
	height: 2.400rem;
	font-size: 0.933rem;
	font-weight: 400;
	padding-right: 0.733rem;
	padding-left: 0.733rem;
}

.col a.btn-larger {
	display: inline-block;
	font-family: inherit;
	line-height: 2.267rem;
	text-align: center;
	text-decoration: none;
	border: 0.067rem solid $TitleBarAndAppBarDark;
}

.col a.btn-larger i.fa,
.col a.btn-larger i.mi,
.col a.btn-larger i.mdi,
.col a.btn-larger i.material-icons {
	font-size: 0.800rem;
	line-height: 2.400rem;
}

.col .btn-primary,
.col .btn-primary:focus,
.col a.btn-primary,
.col a.btn-primary:focus {
	color: #FFFFFF;
	background-color: $TitleBarAndAppBarDark;
	border-color: $TitleBarAndAppBarDark;
}

.col .btn-primary:hover,
.col .btn-primary:active,
.col a.btn-primary:hover,
.col a.btn-primary:active {
	background-color: #000000;
	border-color: #000000;
}

.col .btn-secondary,
.col .btn-secondary:focus,
.col a.btn-secondary,
.col a.btn-secondary:focus {
	color: $ButtonText;
	background-color: $ButtonBackground;
	border-color: $ButtonBackground;
}

.col .btn-secondary:hover,
.col .btn-secondary:active,
.col a.btn-secondary:hover,
.col a.btn-secondary:active {
	color: $ButtonText;
	background-color: $ButtonBackground;
	border-color: $ButtonOutline;
}

.col .btn-link,
.col .btn-link:focus,
.col a.btn-link,
.col a.btn-link:focus {
	color: $ButtonText;
	background-color: transparent;
	border-color: $ButtonBackground;
}

.col .btn-link:hover,
.col .btn-link:active,
.col a.btn-link:hover,
.col a.btn-link:active {
	color: $ButtonText;
	background-color: $ButtonBackground;
	border-color: $ButtonOutline;
}

/*!
 * vcard block
 */

.col .vcard {
	display: none;
	font-size: 0.867rem;
	background-color: $LeftNavBarLight;
	padding: 0.533rem 0.800rem;
}

.vcard .category {
	display: none;
}

/*!
 * aside block
 */

.col .aside {
	display: block;
	background-color: $LeftNavBarLight;
	padding: 1.333rem 1.333rem;
}

.col .aside *:first-child {
	margin-top: 0;
}

.col .aside *:last-child {
	margin-bottom: 0;
}

.col .aside p {	
	font-size: 0.867rem;
	line-height: 1.333rem;
}

.col .aside h2 {
	font-size: 1.133rem;
	line-height: 1.600rem;
}

/* .col .aside h2 a,
.col .aside p a {
	color: inherit;
	text-decoration: none;
} */

.col p + .aside {
	margin-top: 1.333rem;
}

/**
 * fix width for hint.css
 * where hint class sets display inline block
 */

[class^="hint--"],
[class*=" hint--"] {
	display: block /* !important */;
}

/*!
 * pages selecto
 */

.holder-chapters-select {
	display: block;
	width: 100%;
	text-align: left;
}

.holder-chapters-select .chapters-select {
	display: inline-block;
	width: 100%;
	max-width: 18.133rem;
	height: 2.400rem;
	font-family: inherit;
	font-size: 0.933rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: inherit;
	background-color: #F2F2F2;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	margin: 0;
	padding: 0 0 0 0.267rem;
}

.holder-chapters-select .chapters-select::-ms-expand {
	display: none;
}

.holder-chapters-select .chapters-select::-ms-value {
    background: none;
	color: inherit;
}

.holder-chapters-select .chapters-select optgroup {
	font-style: normal;
	padding-left: 0.267rem;
}

/*!
 * fix select border for electron and nw
 */

.holder-chapters-select .chapters-select,
.holder-chapters-select .chapters-select:focus,
.holder-chapters-select .chapters-select:hover,
.holder-chapters-select .chapters-select:active {
	border: 0.067rem solid #F2F2F2;
}

/*!
 * expanding layer
 */

.col .btn-expand-hidden-layer {
	-webkit-tap-highlight-color: transparent;
	outline: none;
	user-select: none;
	cursor: pointer;
}

.col .btn-expand-hidden-layer:after {
	/* font-family: "micon"; */
	font-family: "eaststreet";
	content: "\EA8E";
	font-size: 0.400em;
	position: relative;
	bottom: 0.467em;
	margin-left: 0.467em;
}

.col .btn-expand-hidden-layer.is-active:after {
	font-family: "micon";
	font-family: "eaststreet";
	content: "\EA97";
}

.col .holder-hidden-layer {
	max-height: 100%;
	position: relative;
	transition: all 0.2s ease-out;
	overflow-y: hidden;
}

.js .col .holder-hidden-layer {
	max-height: 0;
	overflow: hidden;
}

.col .holder-hidden-layer.is-active,
.legacy .col .holder-hidden-layer {
	max-height: 100%;
	overflow-y: hidden;
}

.col .holder-btn-expand-hidden-layer + .holder-hidden-layer.is-active,
.legacy .col .holder-btn-expand-hidden-layer + .holder-hidden-layer {
	margin-top: 0.533rem;
}

.col .holder-hidden-layer h3:first-child,
.col .holder-hidden-layer p:first-child,
.col .holder-hidden-layer table:first-child,
.col .holder-hidden-layer ol:first-child,
.col .holder-hidden-layer ul:first-child {
	margin-top: 0;
}

.col .holder-hidden-layer p:last-child,
.col .holder-hidden-layer table:last-child,
.col .holder-hidden-layer ol:last-child,
.col .holder-hidden-layer ul:last-child {
	margin-bottom: 0;
}

/*!
 * ui-panel-top
 */

.ui-panel-top {
	width: 100%;
	height: 3.200rem;
	background-color: $color-hex-ui-bar-bg;
}

/*!
 * ui-sidepanel
 * modified github.com/kudosagency/simplest-sidebar
 */

.ui-sidepanel {
	width: 18.133rem;
	height: 100%;
	position: fixed;
	top: 0;
	left: -14.933rem;
	background-color: $color-hex-darker-ui-bar-bg;
	transition: left 0.2s linear;
	overflow-y: auto;
	margin: 0;
}

@media handheld, only screen and (max-width: 360px) {
	.ui-sidepanel {
		left: -18.133rem;
	}
}

.page.is-active-ui-sidepanel .ui-sidepanel {
	left: 0;
}

.page.is-active-ui-sidepanel {
	left: 18.133rem;
}

.page.is-active-ui-sidepanel .page-overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: $color-rgba-page-overlay-bg;
	transition: background-color 0.2s ease;
}

.btn-toggle-ui-sidepanel {
	display: inline-block;
	width: 3.200rem;
	height: 3.200rem;
	position: fixed;
	top: 0;
	left: 3.200rem;
	font-size: 1.333rem;
	line-height: 3.200rem;
	text-align: center;
	text-decoration: none;
	color: $color-hex-gray-text;
	background-color: $color-hex-ui-icon-bg;
	transition: left 0.2s linear, background-color 0.2s ease;
}

@media handheld, only screen and (max-width: 360px) {
	.btn-toggle-ui-sidepanel {
		left: 0;
	}
}

.page.is-active-ui-sidepanel .btn-toggle-ui-sidepanel {
	left: 18.133rem;
}

.btn-toggle-ui-sidepanel:hover {
	background-color: $color-hex-hover-ui-icon-bg;
}

.page.is-active-ui-sidepanel .btn-toggle-ui-sidepanel,
/* .btn-toggle-ui-sidepanel:focus, */
.btn-toggle-ui-sidepanel:active {
	color: $color-hex-body-text;
	background-color: $AccentColor;
}

.page.is-active-ui-sidepanel .btn-toggle-ui-sidepanel.mi-GlobalNavButton:before,
.page.is-active-ui-sidepanel .btn-toggle-ui-sidepanel.es-mi-GlobalNavButton:before {
	/* font-family: "micon"; */
	font-family: "eaststreet";
	content: "\EA80";
}

.ui-sidepanel-list {
	margin: 0;
	padding: 0;
}

.ui-sidepanel-list li {
	height: 3.200rem;
	line-height: 3.200rem;
	list-style-type: none;
}

.ui-sidepanel-list a {
	display: block;
	width: 100%;
	font-size: 0.933rem;
	text-decoration: none;
	color: #FFFFFF;
	background-color: transparent;
	transition: background-color 0.2s ease;
	padding-right: 1.333rem;
	padding-left: 1.333rem;
}

.ui-sidepanel-list a:hover {
	background-color: $color-hex-darker-ui-bar-hover-item-bg;
}

.ui-sidepanel-list a.is-active {
	background-color: $color-hex-darker-ui-bar-active-item-bg;
}

/* .ui-sidepanel-list a:focus, */
.ui-sidepanel-list a:active {
	color: $color-hex-body-text;
	background-color: $AccentColor;
}

/*!
 * ui-menumore
 */

.ui-menumore {
	display: block;
	visibility: hidden;
	opacity: 0;
	width: 18.133rem;
	max-height: 16.000rem;
	position: fixed;
	top: 3.200rem;
	left: 6.400rem;
	overflow-y: auto;
	background-color: $LeftNavBarLight;
	border: 0.067rem solid $AccentColor;
	transition: left 0.2s linear, visibility 0s, opacity 0.2s ease;
	margin: 0;
}

@media handheld, only screen and (max-width: 360px) {
	.ui-menumore {
		left: 3.200rem;
	}
}

.page.is-active-ui-menumore .ui-menumore {
	visibility: visible;
	opacity: 1;
}

.btn-toggle-ui-menumore {
	display: inline-block;
	width: 3.200rem;
	height: 3.200rem;
	position: fixed;
	top: 0;
	left: 6.400rem;
	font-size: 1.333rem;
	line-height: 3.200rem;
	text-align: center;
	text-decoration: none;
	color: $color-hex-gray-text;
	background-color: $color-hex-ui-icon-bg;
	transition: left 0.2s linear, background-color 0.2s ease;
}

@media handheld, only screen and (max-width: 360px) {
	.btn-toggle-ui-menumore {
		left: 3.200rem;
	}
}

.btn-toggle-ui-menumore:hover {
	background-color: $color-hex-hover-ui-icon-bg;
}

/* .page.is-active-ui-menumore .btn-toggle-ui-menumore,
.btn-toggle-ui-menumore:focus, */
.btn-toggle-ui-menumore:active {
	color: $color-hex-body-text;
	background-color: $AccentColor;
}

.page.is-active-ui-sidepanel .btn-toggle-ui-menumore {
	left: 21.333rem;
}

.ui-menumore-list {
	margin: 0;
	padding: 0;
}

.ui-menumore-list li {
	height: 3.200rem;
	list-style-type: none;
	line-height: 3.200rem;
	overflow: hidden;
}

.ui-menumore-list a {
	display: block;
	width: 100%;
	font-size: 0.933rem;
	text-decoration: none;
	color: inherit;
	background-color: transparent;
	transition: background-color 0.2s ease;
	overflow-x: hidden;
	white-space: nowrap;
	padding-right: 1.333rem;
	padding-left: 1.333rem;
}

.ui-menumore-list a:hover {
	background-color: $TitleBarAndAppBarLight;
}

/* .ui-menumore-list a:focus, */
.ui-menumore-list a:active {
	color: $color-hex-body-text;
	background-color: $AccentColor;
}

/*!
 * ui-sidebar
 */

.ui-sidebar {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 3.200rem;
	height: 100%;
	background-color: $color-hex-dark-ui-bar-bg;
	transition: left 0.2s linear;
	overflow-y: hidden;
}

@media handheld, only screen and (max-width: 360px) {
	.ui-sidebar {
		left: -3.200rem;
	}
}

.page.is-active-ui-sidepanel .ui-sidebar {
	left: -3.200rem;
}

.ui-sidebar a {
	display: inline-block;
	width: 3.200rem;
	height: 3.200rem;
	font-size: 1.333rem;
	line-height: 3.200rem;
	text-align: center;
	text-decoration: none;
	color: #FFFFFF;
	background-color: inherit;
	transition: background-color 0.2s ease;
}

.ui-sidebar a:hover {
	background-color: $color-hex-dark-ui-bar-active-item-bg;
}

/* .ui-sidebar a:focus, */
.ui-sidebar a:active {
	color: $color-hex-body-text;
	background-color: $AccentColor;
}

.ui-sidebar a.mi {
	font-size: 1.333rem;
}

.ui-sidebar a.fa {
	font-size: 1.667rem;
}

.ui-sidebar a.es {
	font-size: 1.333rem;
}

/*!
 * social buttons
 */

.holder-share-buttons {
	display: block;
	visibility: hidden;
	opacity: 0;
	width: 3.200rem;
	position: fixed;
	top: 3.200rem;
	left: 3.200rem;
	line-height: 3.200rem;
	background-color: #FFFFFF;
	transition: left 0.2s linear, visibility 0s, opacity 0.2s ease;
}

@media handheld, only screen and (max-width: 360px) {
	.holder-share-buttons {
		left: 0;
	}
}

.page.is-active-holder-share-buttons .holder-share-buttons {
	visibility: visible;
	opacity: 1;
}

/*!
 * holder-vk-like
 */

.holder-vk-like {
	display: inline-block;
	visibility: hidden;
	opacity: 0;
	height: 3.200rem;
	position: fixed;
	top: 3.200rem;
	left: 3.200rem;
	line-height: 0;
	transition: left 0.2s linear, visibility 0s, opacity 0.2s ease;
}

@media handheld, only screen and (max-width: 360px) {
	.holder-vk-like {
		left: 0;
	}
}

.vk-like {
	display: inline-block;
	height: 1.533rem;
	position: relative;
	top: 0.800rem;
	left: 0.800rem;
	line-height: 0;
}

.page.is-active-holder-vk-like .holder-vk-like {
	visibility: visible;
	opacity: 1;
}

.page.is-active-ui-sidepanel .holder-vk-like {
	left: 24.800rem;
}

/*!
 * location qr code
 */

.holder-location-qr-code {
	display: block;
	visibility: hidden;
	opacity: 0;
	width: 9.600rem;
	height: 9.600rem;
	position: fixed;
	top: 3.200rem;
	left: 3.200rem;
	text-align: left;
	background-color: #FFFFFF;
	box-shadow: 0.133rem 0.133rem 0.133rem 0 $color-rgba-ui-bar-shadow;
	transition: left 0.2s linear, visibility 0s, opacity 0.2s ease;
}

@media handheld, only screen and (max-width: 360px) {
	.holder-location-qr-code {
		left: 0;
	}
}

.page.is-active-holder-location-qr-code .holder-location-qr-code {
	visibility: visible;
	opacity: 1;
}

.page.is-active-ui-sidepanel .holder-location-qr-code {
	left: 18.133rem;
}

@media handheld, only screen and (max-width: 1024px) {
	.ui-sidebar .btn-toggle-holder-location-qr-code {
		display: none;
	}
}

.holder-location-qr-code .qr-code-img,
.holder-location-qr-code img {
	display: block;
	width: 9.600rem;
	height: 9.600rem;
	background-color: transparent;
	background-size: 9.600rem 9.600rem;
	border: 0;
	vertical-align: bottom;
	padding: 0;
	margin: 0;
}

/*!
 * search form
 */

.holder-search-form {
	display: inline-block;
	position: fixed;
	top: 0.400rem;
	right: 0.400rem;
}

.holder-search-form input[type^=text],
.holder-search-form input[type^=search] {
	width: 9.600rem;
	font-family: inherit;
	font-size: 0.933rem;
	line-height: 1.200rem;
	color: inherit;
	border-color: transparent;
	border-style: solid;
	border-width: 0.067rem;
	transition: width 0.2s linear;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	padding: 0.533rem 2.400rem 0.533rem 0.533rem;
}

.holder-search-form input[type^=text]:focus,
.holder-search-form input[type^=text]:active,
.holder-search-form input[type^=search]:focus,
.holder-search-form input[type^=search]:active {
	width: 18.133rem;
	background-color: $color-hex-hover-ui-icon-bg;
	border-color: transparent;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

@media only screen and (max-width: 480px) {
	.holder-search-form input[type^=text]:focus,
	.holder-search-form input[type^=text]:active,
	.holder-search-form input[type^=search]:focus,
	.holder-search-form input[type^=search]:active {
		width: 12.800rem;
	}
}

.holder-search-form button[type^=submit] {
	width: 2.400rem;
	height: 2.400rem;
	position: fixed;
	top: 0.400rem;
	right: 0.400rem;
	font-size: 0;
	line-height: 0;
	color: $color-hex-gray-text;
	background-color: transparent;
	border: 0.067rem solid transparent;
	cursor: pointer;
	padding: 1.133rem;
}

.holder-search-form button[type^=submit]:after {
	position: absolute;
	top: 0;
	right: 0.600rem;
	/* font-family: "micon"; */
	font-family: "eaststreet";
	content: "\ECEA";
	font-size: 1.067rem;
	line-height: 2.267rem;
}

/* .holder-search-form button[type^=submit]:focus, */
.holder-search-form button[type^=submit]:active {
	color: $color-hex-body-text;
	background-color: $AccentColor;
	border: 0.067rem solid $AccentColor;
}

.holder-search-text:before,
.ya-site-form:before {
	width: 2.400rem;
	position: absolute;
	top: 0;
	right: 0;
	/* font-family: "micon"; */
	font-family: "eaststreet";
	content: "\ECEA";
	font-size: 1.067rem;
	padding: 0.533rem 0.667rem;
}

.holder-search-form input[type^=text],
.holder-search-form input[type^=search] {
	background-color: $color-hex-ui-bar-bg;
}

/*!
 * fix for yandex search
 * site.yandex.net/v2.0/js/suggest.js
 */

.holder-search-form table td {
	padding: 0;
}

.ya-site-form.ya-site-form_inited_no {
	visibility: hidden;
}

.ya-page_js_yes .ya-site-form_inited_no,
.ya-site-form__submit {
	display: none;
}

/*!
 * debug grid
 */

.debug:before {
	content: " ";
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: transparent;
	/* background-image: url(); */
	/* background-image: url(); */
	background-image: repeating-linear-gradient(to bottom, transparent 0px, transparent 7px, rgba(241, 68, 68, 0.5) 7px, rgba(241, 68, 68, 0.5) 8px);
	background-size: 8px 8px;
	background-position: 0 0;
	background-repeat: repeat;
	pointer-events: none;
}

/* .debug .row:before {
	content: " ";
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: rgba(241, 68, 68, 0.05);
} */

.debug .column:before {
	content: " ";
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: rgba(241, 68, 68, 0.1);
	pointer-events: none;
}

